<html>
<head><title>Order App</title>

	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	{{ HTML::style('css/bootstrap.min.css') }}	
	{{ HTML::style('css/shop-homepage.css') }}	

	{{ HTML::style('style.css') }}
	<link rel="shortcut icon" href="favicon.ico">
</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
  	<div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Lifestyles and Beauty" src="{{asset('lb-logo.png')}}">
      </a>
    </div>
    <ul class="nav nav-pills">
	  <li role="presentation" class="active"><a href="#">Home</a></li>
	  <li role="presentation"><a href="#">Services</a></li>
	  <li role="presentation"><a href="#">Contact Us</a></li>
	</ul>
  </div>
</nav>

<div class="container">
	<div class="col-lg-3">
		<h3>Lifestyles & Beauty</h3>
		<ul class="nav nav-pills nav-stacked">
		  <li role="presentation"><a href="#">Health Care</a></li>
		  <li role="presentation"><a href="#">Beauty Product</a></li>
		</ul>
	</div>

	<!--
		Product
	-->
	<div class="col-lg-8">

		<div class="col-sm-4 col-lg-4 col-md-4">
			<div class="thumbnail">
				{{ HTML::image(asset('images/intra-thumb.JPG')) }}
				<div class="caption">
					<h4 class="pull-right">$24.99</h4>
					<h4><a href="#">Intra</a>
					</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a enim tristique, convallis odio non, sollicitudin enim. Etiam nec magna arcu. Vivamus vitae ligula luctus, fermentum mi sed, cursus erat. Nullam tempor pretium nisi quis suscipit. Vivamus ut orci enim. Mauris sit amet nibh dui. Praesent eu dapibus dolor. In dictum aliquam dolor in aliquam. In vitae pretium est.</p>
					</div>
					<div class="ratings">
					<p class="pull-right">15 reviews</p>
					<p>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					</p>
					<p><a href="#"><h5><span id="btn-1" class="label label-primary">Order Now</span></h5></a></p>
				</div>
			</div>
		</div>

		<div class="col-sm-4 col-lg-4 col-md-4">
			<div class="thumbnail">
				{{ HTML::image(asset('images/nutria-thumb.JPG')) }}
				<div class="caption">
					<h4 class="pull-right">$24.99</h4>
					<h4><a href="#">Nutria</a>
					</h4>
					<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus rutrum, lacus sit amet convallis vestibulum, nunc turpis cursus turpis, ac accumsan eros arcu condimentum risus.</p>
					</div>
					<div class="ratings">
					<p class="pull-right">15 reviews</p>
					<p>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					</p>
					<p><a href="#"><h5><span class="label label-primary">Order Now</span></h5></a></p>
				</div>
			</div>
		</div>

		<div class="col-sm-4 col-lg-4 col-md-4">
			<div class="thumbnail">
				{{ HTML::image(asset('images/fiber-thumb.JPG')) }}
				<div class="caption">
					<h4 class="pull-right">$24.99</h4>
					<h4><a href="#">Fiber Life</a>
					</h4>
					<p>Curabitur dolor odio, accumsan et felis id, facilisis vehicula purus. Mauris consectetur porttitor risus a interdum. Suspendisse ex nisi, sagittis nec rhoncus vel, pulvinar nec ligula. Donec porttitor quam ac blandit ornare. Phasellus tempor ex ac ipsum vestibulum, quis aliquet mauris cursus.</p>
					</div>
					<div class="ratings">
					<p class="pull-right">15 reviews</p>
					<p>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					</p>
					<p><a href="#"><h5><span class="label label-primary">Order Now</span></h5></a></p>
				</div>
			</div>
		</div>

		<div class="col-sm-4 col-lg-4 col-md-4">
			<div class="thumbnail">
				{{ HTML::image(asset('images/marykay-thumb.JPG')) }}
				<div class="caption">
					<h4 class="pull-right">$24.99</h4>
					<h4><a href="#">Lips Stick</a>
					</h4>
					<p>Nam ante nunc, fermentum nec augue et, elementum auctor nunc. Cras pretium odio diam, sit amet eleifend velit eleifend eu.</p>
					</div>
					<div class="ratings">
					<p class="pull-right">15 reviews</p>
					<p>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					    <span class="glyphicon glyphicon-star"></span>
					</p>
					<p><a href="#"><h5><span class="label label-primary">Order Now</span></h5></a></p>
				</div>
			</div>
		</div>

	</div><!--Product-->

</div><!-- .container -->

<div class="container">	
	<footer>
		<hr />
		Developer <b><a href="http://facebook.com/cadeath">Eskie</a></b>
	</footer>
</div>
	<!--script src="//code.jquery.com/jquery-1.10.2.min.js"></script-->
	<!--script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script-->
	<!--link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"-->
    <!-- Referencing Bootstrap JS that is hosted locally -->
    {{ HTML::script('js/bootstrap.min.js') }}
    {{ HTML::script('jquery-ui/external/jquery/jquery.js') }}
    {{ HTML::script('jquery-ui/jquery-ui.min.js') }}
    {{ HTML::style('jquery-ui/jquery-ui.css') }}

    <script type="text/javascript">
		$(function() {
		  $('#order-form').dialog({
		  	autoOpen: false,
		  	width: 350,
		  	modal: true,
		  	buttons: {
		  		"Order": function(){
		  			alert("Ordered!");
		  			$('#order-form').dialog('close');
		  		},
		  		"Cancel": function(){
		  			$('#order-form').dialog('close');
		  		}
		  	}
		  });

		  $('#btn-1').click(function(){
		  	$('#order-form').dialog('open');
		  });
		});
	</script>

	<!--
		Script codes
	-->
	<div id="order-form" title="Order">
		<form>
			<h2>Item Name</h2>
			<div class="input-group">
			  <span class="input-group-addon">qty</span>
			  <input type="text" class="form-control" placeholder="Quantity">
			</div>

			<div class="form-group">
			    <label for="contactNumber">Contact number</label>
			    <input type="text" class="form-control" id="contactNumber" placeholder="Contact Number">
			</div>

			Are you a <i>MEMBER</i>? <input type="checkbox" id="member">   

			<div class="form-group">
			    <label for="msg">Message</label>
			    <input type="text" class="form-control" id="msg" placeholder="Any message">
			</div>
		</form>	
	</div>
</body>
</html>